<template>
  <el-form ref="form" :model="form" label-width="80px" :rules="rules">
    <el-form-item label="用户名:" prop="adminUsername">
      <el-input
        v-model="form.adminUsername"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码:" prop="adminPassword">
      <el-input
        v-model="form.adminPassword"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="真实姓名:" prop="adminName">
      <el-input
        v-model="form.adminName"
        placeholder="请输入真实姓名"
      ></el-input>
    </el-form-item>
    <el-form-item label="年龄:">
      <el-input v-model="form.adminAge" placeholder="请输入年龄"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="form.adminSex" placeholder="性别">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
        v-model="form.adminBirthday"
        type="date"
        placeholder="选日期"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="手机:">
      <el-input v-model="form.adminTel" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="form.status" placeholder="状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="2"></el-option>
      </el-select>
    </el-form-item>
    <div class="clibtn">
      <el-button type="primary" size="small" @click="submit()">提交</el-button>
      <el-button size="small" @click="handleClose()">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import {
  addAdminList,
  editAdminList,
  idAdminList,
} from "@/apis/zhuomeng/Index.js";
export default {
  data() {
    return {
      form: {
        adminUsername: "",
        adminName: "",
        adminSex: "",
        adminTel: "",
        adminCreatetime: "",
        adminPassword: "",
        adminAge: "",
        adminBirthday: "",
      },
      rules: {
        adminUsername: [{ required: true, message: "请输入用户名" }],
        adminPassword: [{ required: true, message: "请输入密码" }],
        adminName: [{ required: true, message: "请输入真实姓名" }],
        status: [{ required: true, message: "请选择状态" }],
      },
    };
  },
  mounted() {
    this.adminId = this.$route.query.rowId;
    console.log(this.adminId);
    if (this.adminId) {
      // 6.通过adminId发请求查数据,赋值给form
      idAdminList(this.adminId).then((ok) => {
        console.log(ok);
        this.form = ok.data.data;
      });
    }
  },
  methods: {
    // 提交用户信息
    submit() {
      if (!this.adminId) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 3.添加列表数据
            addAdminList(
              this.form.adminUsername,
              this.form.adminPassword,
              this.form.adminName,
              this.form.adminAge,
              this.form.adminSex,
              this.form.adminBirthday,
              this.form.adminTel,
              this.form.adminCreatetime
            ).then((ok) => {
              console.log(ok);
              this.$router.push("/guanliyuan");
            });
          }
        });
      } else {
        // 编辑数据
        // console.log(this.adminId);
        editAdminList(
          this.form.adminUsername,
          this.form.adminPassword,
          this.form.adminName,
          Number(this.form.adminAge),
          this.form.adminSex,
          this.form.adminBirthday,
          Number(this.form.adminTel),
          this.form.adminCreatetime,
          this.adminId
        ).then((ok) => {
          console.log(ok);
          this.$router.push("/guanliyuan");
        });
      }
    },
    // 重置信息
    handleClose() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
input {
  width: 100%;
  height: 30px;
  border: 1px solid#ccc;
}
.clibtn {
  margin-left: 80px;
}
</style>
